<template>
  <div class="admin_main_block_select">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="Resources">
          <el-radio-group v-model="dataForm.level" :placeholder="i18n('common.please_select') + i18n('client.level')" clearable>
            <el-radio label="">{{ i18n('common.all') }}</el-radio>
            <el-radio v-for="(v, k) in levelList" :key="k" :label="v.value">{{ v.value }} - {{ v.text }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">

      </el-col>
      <el-col :span="12">

      </el-col>
    </el-row>

    <div class="input">
      <el-select
        v-model="dataForm.level"
        :placeholder="i18n('common.please_select') + i18n('client.level')" clearable>
        <el-option v-for="(v, k) in levelList" :label="v.text" :key="k" :value="v.value"></el-option>
      </el-select>
    </div>
    <div class="input">
      <el-select
        v-model="dataForm.demand__demand_type"
        :placeholder="i18n('common.please_select') + i18n('demand.demand_type')" clearable>
        <el-option v-for="(v, k) in demandTypeList" :label="v.text" :key="k" :value="v.value"></el-option>
      </el-select>
    </div>
    <div class="input">
      <el-cascader v-model="dataForm.industry_id" :placeholder="$t('common.please_select')+$t('example.industry_id')" :options="industryList" :props="levelProps" clearable></el-cascader>
    </div>
    <div class="input">
      <el-select
        v-model="dataForm.integrity_score"
        :placeholder="i18n('common.please_select') + i18n('client.integrity_score')" clearable>
        <el-option v-for="(v, k) in integrityScoreList" :label="v.text" :key="k" :value="v.value"></el-option>
      </el-select>
    </div>
    <div class="input">
      <el-select v-model="dataForm.status" :placeholder="$t('common.please_select') + $t('common.status')" clearable>
        <el-option :label="$t('common.all')" value=""></el-option>
        <el-option :label="$t('common.show')" value="1"></el-option>
        <el-option :label="$t('common.hidden')" value="2"></el-option>
      </el-select>
    </div>
    <div class="date">
      <el-date-picker v-model="dataForm.create_time" type="daterange" :range-separator="$t('common.to')" :start-placeholder="$t('common.start_time')" :end-placeholder="$t('common.end_time')" clearable>
      </el-date-picker>
    </div>
    <div class="input">
      <el-button icon="Search" @click="getDataList(true)">
        {{ i18n('common.search') }}
      </el-button>
    </div>
  </div>
</template>

<script setup name="client-list">
  import { useBase } from "@/hooks/base/useBase"

  const { i18n } = useBase()

  const levelList = ref([])
  const industryList = ref([])
  const demandTypeList = ref([])
  const integrityScoreList = ref([])

  const loadLevelList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'client_level',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        levelList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadIndustryList = () => {
    $http({
      url: $http.adornUrl('/industry/select'),
      method: 'get',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        industryList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadDemandTypeList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'demand_type',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        demandTypeList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  const loadIntegrityScoreList = () => {
    $http({
      url: $http.adornUrl('/dictionary/data'),
      method: 'get',
      params: $http.adornParams({
        title: 'complete_level',
      }),
    }).then(({data}) => {
      if (data && data.status === 200) {
        integrityScoreList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  onMounted(() => {
    loadLevelList()
    loadIndustryList()
    loadDemandTypeList()
    loadIntegrityScoreList()
  })
</script>
